<template>
  <div
    style="display: flex; gap: 20px; margin-bottom: 20px; height: calc(37vh)"
  >
    <!-- 左侧基本信息卡片 -->
    <a-card
      title="用户基本信息"
      hoverable
      :style="{ width: '30%', flexShrink: 0 }"
    >
      <a-descriptions
        style="margin-top: 20px"
        :data="data"
        size="large"
        :column="1"
        bordered
      />
      <template #extra>
        <a-link @click="openEditDrawer">修改密码</a-link>
      </template>
    </a-card>

    <!-- 上半部分 - 圆环图 -->
    <a-card class="chart-section">
      <div class="chart-container">
        <div class="chart-content">
          <v-chart :option="chartOption" class="chart" autoresize />
          <div class="ac-info">
            <div class="ac-title">AC题目数/题目总数：</div>
            <div class="ac-count">
              <span class="ac-completed">{{ userInfo.accepted }}</span>
              <span class="ac-slash">/</span>
              <span class="ac-total">{{ userInfo.total }}</span>
            </div>
          </div>
          <div class="user-info-glass">
            <div class="header">
              <icon-user style="color: #4dabf7; font-size: 24px" />
              <div class="user-title">用户档案</div>
            </div>
            <div class="content">
              <div class="username">{{ userInfo.name }}</div>
              <div class="score">
                <icon-trophy style="margin-right: 8px" />
                <span>总分: {{ userInfo.score }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
  <a-drawer
    width="30%"
    :visible="visible"
    placement="right"
    @ok="handleOk"
    @cancel="closeEditDrawer"
    unmountOnClose
  >
    <div style="text-align: center; margin-bottom: 20px"></div>
    <a-form
      :model="loginUser"
      label-align="left"
      auto-label-width
      style="max-width: 480px; margin: 0 auto"
    >
      <a-form-item field="旧密码" label="旧密码 :">
        <a-input-password
          v-model="updateForm.oldPassword"
          placeholder="请输入旧密码"
        />
      </a-form-item>
      <a-form-item field="新密码" label="新密码 :">
        <a-input-password
          v-model="updateForm.newPassword"
          placeholder="请输入新密码"
        />
      </a-form-item>
      <a-form-item field="确认密码" label="确认密码 :">
        <a-input-password
          v-model="updateForm.ensurePassword"
          placeholder="请再次输入新密码"
        />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script setup lang="ts">
import { useStore } from "vuex";
import { LoginUserVO, UserControllerService } from "../../../api";
import { computed, onMounted, ref } from "vue";
import { DescData, Message } from "@arco-design/web-vue";
import { UserChangePasswordRequest } from "../../../api/models/UserChangePasswordRequest";
import { useRouter } from "vue-router";
import VChart from "vue-echarts";
import message from "@arco-design/web-vue/es/message";
import { ACCESS_ENUM } from "@/access/accessEnum";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  LegendComponent,
  TitleComponent,
  TooltipComponent,
} from "echarts/components";

const router = useRouter();
const store = useStore();
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
const loginUser: LoginUserVO = computed(
  () => store.state.user?.loginUser
) as LoginUserVO;
const data = [
  {
    label: "学号",
    value: store.state.user?.loginUser.id,
  },
  {
    label: "用户名称",
    value: store.state.user?.loginUser.username,
  },
  {
    label: "班级",
    value: store.state.user?.loginUser.clazz,
  },
  {
    label: "创建时间",
    value: store.state.user?.loginUser.createTime,
  },
  {
    label: "上次修改时间",
    value: store.state.user?.loginUser.updateTime,
  },
] as DescData[];

const chartOption = ref({
  title: {
    text: "题目完成情况",
    left: "center",
    top: "0%", // 调整标题与图表间距
    textStyle: {
      color: "#2d3436",
      fontSize: 16,
      fontWeight: "bold",
    },
  },
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      name: "题目完成情况",
      type: "pie",
      radius: ["50%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      data: [
        {
          value: 0,
          name: "已完成",
          itemStyle: { color: "rgba(137,225,144,0.99)" },
        },
        { value: 0, name: "未完成", itemStyle: { color: "#ef7358" } },
      ],
    },
  ],
});
// 用户信息
const userInfo = ref<{
  name: string;
  score: number;
  accepted: number;
  total: number;
}>({
  name: "加载中...",
  score: 0,
  accepted: 0,
  total: 0,
});

const visible = ref(false);
const updateForm = ref<UserChangePasswordRequest>({
  oldPassword: "",
  newPassword: "",
  ensurePassword: "",
});
const openEditDrawer = () => {
  visible.value = true;
};
const handleOk = async () => {
  const res = await UserControllerService.changePassword(updateForm.value);
  if (res.code === 0) {
    Message.success("更新成功！");
    visible.value = false;
    // 修改密码之后的逻辑
    await UserControllerService.userLogout();
    await router.push({
      path: "/user/login",
    });
    return;
  } else {
    Message.error(res.message ?? "");
  }
};
const closeEditDrawer = () => {
  visible.value = false;
};

onMounted(() => {
  loadData();
});

const loadData = async () => {
  let loginUser = store.state.user.loginUser;
  // 填充用户信息 圆环图+分数等
  if (loginUser.userRole !== ACCESS_ENUM.NOT_LOGIN) {
    userInfo.value.name = loginUser.username;
    userInfo.value.score = loginUser.score;
    const res = await UserControllerService.getUserCompletionOfTheQuestion();
    if (res.code === 0) {
      userInfo.value.accepted = res.data?.acceptedQuestionNumber ?? 0;
      let remain = res.data?.remainingQuestionNumber ?? 0;
      userInfo.value.total = Number(userInfo.value.accepted) + Number(remain);
      // 设置圆环
      chartOption.value.series[0].data = [
        {
          value: res.data?.acceptedQuestionNumber ?? 0,
          name: "已完成",
          itemStyle: { color: "rgba(137,225,144,0.99)" },
        },
        {
          value: res.data?.remainingQuestionNumber ?? 0,
          name: "未完成",
          itemStyle: { color: "#ef7358" },
        },
      ];
    } else {
      message.error(res.message ?? "系统出错");
    }
  }
};
</script>
<style scoped>
.chart-container {
  position: relative;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.chart-content {
  display: flex;
  align-items: center;
  gap: 40px; /* 控制图表和AC数的间距 */
  flex: 1;
}

.chart {
  width: 250px;
  height: 250px;
  flex-shrink: 0;
}

.ac-info {
  /* 新增对齐样式 */
  margin-top: -20px; /* 调整垂直位置 */
}

/* 新增布局调整 */
.chart-section {
  height: 100%; /* 保持与左侧卡片等高 */
  width: 80%; /* 防止过度压缩 */
}

.ac-title {
  font-size: 18px;
}

/* AC题目数样式 */
.ac-count {
  font-size: 30px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 数字间距 */
  gap: 2px;
}

.ac-completed {
  color: #52c41a; /* 蚂蚁绿 */
}

.ac-slash {
  color: #000; /* 纯黑 */
}

.ac-total {
  color: #1890ff; /* 蚂蚁蓝 */
}

/* AC题目数样式 */

/*用户信息*/
.user-info-glass {
  position: absolute;
  right: 50px; /* 向右偏移 20px */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%);
  width: 300px;
  min-height: 140px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 12px;
  margin-bottom: 15px;
}

.content {
  .username {
    font-size: 20px;
    font-weight: 500;
    color: #2d3436;
  }

  .score {
    font-size: 16px;
    margin-top: 14px;
    color: #6c5ce7;
    display: flex;
    align-items: center;
  }
}

.user-title {
  font-size: 20px;
  color: #444;
  margin-right: 16px;
}
</style>
